﻿<!DOCTYPE html>
<!--[if IE 8 ]><html class="no-js oldie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="no-js oldie ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>

   <!--- basic page needs
   ================================================== -->
   <meta charset="utf-8">
	<title>Standard Format Post - Abstract</title>
	<meta name="description" content="">  
	<meta name="author" content="">

   <!-- mobile specific metas
   ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

 	<!-- CSS
   ================================================== -->
   <link type="text/css" rel="stylesheet" href="css/stylesheet.css"/>
   <link rel="stylesheet" href="../css/base.css">
   <link rel="stylesheet" href="../css/vendor.css">  
   <link rel="stylesheet" href="../css/main.css">
        

   <!-- script
   ================================================== -->
	<script src="../js/modernizr.js"></script>
	<script src="../js/pace.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../js/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../js/jquery.raty.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../js/jquery.js"></script>
   <!-- favicons
	================================================== -->
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
	<link rel="icon" href="favicon.ico" type="image/x-icon">

</head>

<body id="top">

	<!-- header 
   ================================================== -->
   <header class="short-header">

   	<div class="gradient-block"></div>

   	<div class="row header-content">

   		<div class="logo">
	         <a href="bookInfo.html">Author</a>
	      </div>

	   	<nav id="main-nav-wrap">
				<ul class="main-navigation sf-menu">
					<li class="current"><a href="index.html" title="">Home</a></li>
					<li class="has-children">
						<a href="category.html" title="">Categories</a>
						<ul class="sub-menu">
			            <li><a href="category.html">Literature</a></li>
			            <li><a href="category.html">Popular</a></li>
			            <li><a href="category.html">Culture</a></li>
			            <li><a href="category.html">Life</a></li>
			            <li><a href="category.html">Economics and management
</a></li>
			            <li><a href="category.html">science and technology
</a></li>
			         </ul>
					</li>
					<li><a href="about.html" title="">About</a></li>
					<li><a href="contact.html" title="">Contact</a></li>
                    <li><a href="login.html" title="">Login</a></li>
				</ul>
			</nav> <!-- end main-nav-wrap -->

			<div class="search-wrap">

				<form role="search" method="get" class="search-form" action="#">
					<label>
						<span class="hide-content">Search for:</span>
						<input type="search" class="search-field" placeholder="Type Your Keywords" value="" name="s" title="Search for:" autocomplete="off">
					</label>
					<input type="submit" class="search-submit" value="Search">
				</form>

				<a href="#" id="close-search" class="close-btn">Close</a>

			</div> <!-- end search wrap -->

			<div class="triggers">
				<a class="search-trigger" href="#"><i class="fa fa-search"></i></a>
				<a class="menu-toggle" href="#"><span>Menu</span></a>
			</div> <!-- end triggers -->

   	</div>

   </header> <!-- end header -->
   

   <!-- content
   ================================================== -->
   <section id="content-wrap" class="blog-single">
   	<div class="row">




   				<div class="bookdetail">
				<div class = "bookcover" id="cover"></div>
                <div class = "bookinfo">
                    <p id="book"></p>
                </div>
                <div id="star" class="star">

			<script type="text/javascript">

     $('#star').raty({
  
  path:"../images",
  half      : true,
  size      : 24,
  starHalf  : 'star-half-big.png',
  starOff   : 'star-off-big.png',
  starOn    : 'star-on-big.png',
  click       : function(score, evt) {
    alert('score: ' + score);
  }
});


     </script>
     </div>
                  </div>

						<div class = "bookintro"><blockquote><p>书籍简介</p></blockquote>
                        <p id="description"></div>


   	</div> <!-- end row -->

		<div class="comments-wrap">
			<div id="comments" class="row">
				<div class="col-full">

               <h3 id="commentsum"></h3>

               <!-- commentlist -->
               <ol class="commentlist" id="bookcomment">
               
               </ol> <!-- Commentlist End -->					

               <!-- respond -->
               <div class="respond">

               	<h3>我要写评论</h3>

                  <form name="contactForm" id="contactForm" method="post" action="./addComment.action?">
  					   <fieldset>


					 <div class="message form-field">
                        <input name="star" id="starinput" type="number" class="full-width" placeholder="你的评分" ></input>
                     </div>

                     <div class="message form-field">
                        <textarea name="comment" id="comment" class="full-width" placeholder="你的评论" ></textarea>
                     </div>

                     <button type="submit" class="submit button-primary" onclick="commitComment()">提交</button>

  					   </fieldset>
  				      </form> <!-- Form End -->

               </div> <!-- Respond End -->

         	</div> <!-- end col-full -->
         </div> <!-- end row comments -->
		</div> <!-- end comments-wrap -->

   </section> <!-- end content -->


   <!-- footer
   ================================================== -->
   <footer>


      <div class="footer-bottom">
      	<div class="row">

      		<div class="col-twelve">
	      		<div class="copyright">
		         	<span>Copyright &copy; 2017. All rights reserved.</span> 
		         </div>

		         <div id="go-top">
		            <a class="smoothscroll" title="Back to Top" href="#top"><i class="icon icon-arrow-up"></i></a>
		         </div>         
	      	</div>

      	</div> 
      </div> <!-- end footer-bottom -->  

   </footer>  

   <div id="preloader"> 
    	<div id="loader"></div>
   </div> 

   <!-- Java Script
   ================================================== --> 
   <script src="../js/jquery-2.1.3.min.js"></script>
   <script src="../js/plugins.js"></script>
   <script src="../js/main.js"></script>
  

</body>

<script>
$(document).ready(function(){
	var bookid=2;
	var cover;
	var name;
	var author;
	var description;
	var string;
	var type;
	var comments;
	var jo = {"bookid":bookid};
	$.ajax({
		type : "post",
		url : "../getBookInfo.action",
		dataType : "json",
		data : jo,
		success : function(data, textStatus) {
			cover=data.cover;
			name=data.name;
			author=data.author;
			type=data.type;
			description=data.description;
			$("#book").html("<strong>书名：</strong>"+name+"<strong><br/>作者：</strong>"+author+"<br/><strong>类别：</strong>"+type); 
			$("#cover").html("<img src="+"../images/1.jpg"+"/>");
			$("#description").html(description);
			$("#commentsum").html(data.comments.length+"条评论");
			
			var comment="";
			for(var i=0,l=data.comments.length;i<l;i++){
					comment+='<li class="depth-1"><div class="avatar"><img width="50" height="50" class="avatar" src="../images/avatars/user-01.jpg" alt=""></div><div class="comment-content"><div class="comment-info"><cite>'+data.comments[i].userid+'</cite><div class="comment-meta"><time class="comment-time" datetime="'+data.comments[i].time+'">'+data.comments[i].time+'</time></div></div><div class="comment-text"><p>'+data.comments[i].content+'</p></div></div></li>';
					}
			$("#bookcomment").html(comment);
		}
	});	  

	});
       
       
function commitComment(){
	var content=$("#comment").val();
	var star=$("#star").val();
	var jo = {"content":content,"star":star};
	$.ajax({
		type : "post",
		url : "../addComment.action",
		dataType : "json",
		data : jo,
		success : function(data, textStatus) {
			//<!--变成字节流>
			var obj = eval(data);
			alert(obj.status);
			if (obj == "" || obj == null){
				return false;
			}
			if(obj.status=="succeed"){
				alert("提交成功");
			}
				
			
		}
	});	 
}
</script>


</html>